import { useParams, useNavigate } from 'react-router-dom';
import { Form, Input, Button, Space } from "@arco-design/web-react"
import { useDispatch, useSelector } from "react-redux"
import { login, getUser } from '@/api/index.ts';
import { getToken, setToken } from '@/utils/auth';
function Login() {
    const router = useNavigate()
    const dispatch = useDispatch()
    // const state = useSelector((state) => state.userInfo?.routeData)
    const gotoLogin = () => {
        login().then((res) => {
            console.log(res);
            if (res?.data && res.data.token) {
                setToken(res.data.token)
                router('/index')
            }
        })
    }

    const rules = {
        username: [
            {
                required: true,
                message: '请输入用户名'
            }
        ],
        password: [
            {
                required: true,
                message: '请输入密码'
            }
        ]
    }

    return (<div className='w-screen h-screen flex justify-center items-center'>
        <div className='w-1/3 -mt-10'>
            <Form layout='inline' className=" flex flex-col justify-center items-center" onSubmit={() => {
                gotoLogin()
            }}>
    
                <Space className='w-full' direction="vertical" align='center'>
                    <Form.Item className='w-full' field='username' rules={rules.username}>
                        <Input placeholder="用户名" />
                    </Form.Item>
                    <Form.Item className='w-full' field='password' rules={rules.password}>
                        <Input placeholder="密码" />
                    </Form.Item>
                    <Form.Item className='w-full'>
                        <Button type="primary" htmlType='submit'>登录</Button>
                    </Form.Item>
                </Space>
            </Form>
        </div>
    </div>);
}

export default Login